
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>后台管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- bootstrap -->
    <link th:href="@{/css/bootstrap/bootstrap.css}" rel="stylesheet" />
    <link th:href="@{/css/bootstrap/bootstrap-overrides.css}" type="text/css" rel="stylesheet" />

    <!-- libraries -->
    <link th:href="@{/css/lib/jquery-ui-1.10.2.custom.css}" rel="stylesheet" type="text/css" />
    <link th:href="@{/css/lib/font-awesome.css}" type="text/css" rel="stylesheet" />

    <!-- global styles -->
    <link rel="stylesheet" type="text/css" th:href="@{/css/compiled/layout.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/compiled/elements.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/compiled/icons.css}">

    <!-- this page specific styles -->
    <link rel="stylesheet" th:href="@{/css/compiled/index.css}" type="text/css" media="screen" />

    <!-- open sans font -->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>

    <!-- lato font -->
    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>

    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
<!-- navbar -->
<header class="navbar navbar-inverse" role="banner">
    <div class="navbar-header">
        <button class="navbar-toggle" type="button" data-toggle="collapse" id="menu-toggler">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" th:href="@{/index}"><img src="img/logo.png"></a>
    </div>
    <ul class="nav navbar-nav pull-right hidden-xs">
        <li class="hidden-xs hidden-sm">
            <input class="search" type="text" />
        </li>
        <li class="notification-dropdown hidden-xs hidden-sm">
            <a href="#" class="trigger">
                <i class="icon-warning-sign"></i>
                <span class="count">8</span>
            </a>
            <div class="pop-dialog">
                <div class="pointer right">
                    <div class="arrow"></div>
                    <div class="arrow_border"></div>
                </div>
                <div class="body">
                    <a href="#" class="close-icon"><i class="icon-remove-sign"></i></a>
                    <div class="notifications">
                        <h3>你有6条信息</h3>
                        <a href="#" class="item">
                            <i class="icon-signin"></i> 新用户注册
                            <span class="time"><i class="icon-time"></i> 13分钟前.</span>
                        </a>
                        <a href="#" class="item">
                            <i class="icon-signin"></i> 新用户注册
                            <span class="time"><i class="icon-time"></i> 18分钟前.</span>
                        </a>
                        <a href="#" class="item">
                            <i class="icon-envelope-alt"></i> 新消息来自Alejandra
                            <span class="time"><i class="icon-time"></i> 28分钟前.</span>
                        </a>
                        <a href="#" class="item">
                            <i class="icon-signin"></i> 新用户注册
                            <span class="time"><i class="icon-time"></i> 49分钟前.</span>
                        </a>
                        <a href="#" class="item">
                            <i class="icon-download-alt"></i> 新订单
                            <span class="time"><i class="icon-time"></i> 1天前.</span>
                        </a>
                        <div class="footer">
                            <a href="#" class="logout">查看所有消息</a>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li class="notification-dropdown hidden-xs hidden-sm">
            <a href="#" class="trigger">
                <i class="icon-envelope"></i>
            </a>
            <div class="pop-dialog">
                <div class="pointer right">
                    <div class="arrow"></div>
                    <div class="arrow_border"></div>
                </div>
                <div class="body">
                    <a href="#" class="close-icon"><i class="icon-remove-sign"></i></a>
                    <div class="messages">
                        <a href="#" class="item">
                            <img src="img/contact-img.png" class="display" />
                            <div class="name">DEMO</div>
                            <div class="msg">
                                回家来吃饭了.
                            </div>
                            <span class="time"><i class="icon-time"></i> 13分钟前.</span>
                        </a>
                        <a href="#" class="item">
                            <img src="img/contact-img2.png" class="display" />
                            <div class="name">Galván</div>
                            <div class="msg">
                                照片很不错哦.
                            </div>
                            <span class="time"><i class="icon-time"></i> 26分钟前.</span>
                        </a>
                        <a href="#" class="item last">
                            <img src="img/contact-img.png" class="display" />
                            <div class="name">后台</div>
                            <div class="msg">
                                模版很不错赶紧下载.
                            </div>
                            <span class="time"><i class="icon-time"></i> 48分钟前.</span>
                        </a>
                        <div class="footer">
                            <a href="#" class="logout">查看所有消息</a>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle hidden-xs hidden-sm" data-toggle="dropdown" th:inline="text">
                [[${name}]]
                <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
                <li><a href="personal-info.html">个人信息</a></li>
                <li><a href="#">账号设置</a></li>
                <li><a href="#">账单</a></li>
                <li><a href="#">导出数据</a></li>
                <li><a href="#">发送反馈</a></li>
            </ul>
        </li>
        <li class="settings hidden-xs hidden-sm">
            <a href="personal-info.html" role="button">
                <i class="icon-cog"></i>
            </a>
        </li>
        <li class="settings hidden-xs hidden-sm">
            <a th:href="@{/logout}" role="button">
                <i class="icon-share-alt"></i>
            </a>
        </li>
    </ul>
</header>
<!-- end navbar -->

<!-- sidebar -->
<div id="sidebar-nav">
    <ul id="dashboard-menu">
        <li class="active">
            <div class="pointer">
                <div class="arrow"></div>
                <div class="arrow_border"></div>
            </div>
            <a th:href="@{/index}">
                <i class="icon-home"></i>
                <span>首页</span>
            </a>
        </li>
        <li shiro:hasPermission="chartShowcase">
            <a th:href="@{/chartShowcase}">
                <i class="icon-signal"></i>
                <span>图表</span>
            </a>
        </li>
        <li>
            <a class="dropdown-toggle" href="#">
                <i class="icon-group"></i>
                <span>用户</span>
                <i class="icon-chevron-down"></i>
            </a>
            <ul class="submenu">
                <li><a th:href="@{/userList}">用户列表</a></li>
                <li><a th:href="@{/newUser}">新用户</a></li>
                <li shiro:hasAnyRoles="admin, user"><a th:href="@{/userProfile}">用户资料</a></li>
            </ul>
        </li>
        <!--<li>-->
            <!--<a class="dropdown-toggle" href="#">-->
                <!--<i class="icon-edit"></i>-->
                <!--<span>表单</span>-->
                <!--<i class="icon-chevron-down"></i>-->
            <!--</a>-->
            <!--<ul class="submenu">-->
                <!--<li><a href="form-showcase.html">表单应用</a></li>-->
                <!--<li><a href="form-wizard.html">表单验证</a></li>-->
            <!--</ul>-->
        <!--</li>-->
        <!--<li>-->
            <!--<a href="gallery.html">-->
                <!--<i class="icon-picture"></i>-->
                <!--<span>相册</span>-->
            <!--</a>-->
        <!--</li>-->
        <!--<li>-->
            <!--<a href="calendar.html">-->
                <!--<i class="icon-calendar-empty"></i>-->
                <!--<span>日历</span>-->
            <!--</a>-->
        <!--</li>-->
        <!--<li>-->
            <!--<a class="dropdown-toggle" href="tables.html">-->
                <!--<i class="icon-th-large"></i>-->
                <!--<span>表格</span>-->
                <!--<i class="icon-chevron-down"></i>-->
            <!--</a>-->
            <!--<ul class="submenu">-->
                <!--<li><a href="tables.html">常用表格</a></li>-->
                <!--<li><a href="datatables.html">数据表格</a></li>-->
            <!--</ul>-->
        <!--</li>-->
        <!--<li>-->
            <!--<a class="dropdown-toggle ui-elements" href="#">-->
                <!--<i class="icon-code-fork"></i>-->
                <!--<span>UI 组件</span>-->
                <!--<i class="icon-chevron-down"></i>-->
            <!--</a>-->
            <!--<ul class="submenu">-->
                <!--<li><a href="ui-elements.html">UI 组件</a></li>-->
                <!--<li><a href="icons.html">Icons图标</a></li>-->
            <!--</ul>-->
        <!--</li>-->
        <!--<li>-->
            <!--<a href="personal-info.html">-->
                <!--<i class="icon-cog"></i>-->
                <!--<span>我的信息</span>-->
            <!--</a>-->
        <!--</li>-->
        <!--<li>-->
            <!--<a class="dropdown-toggle" href="#">-->
                <!--<i class="icon-share-alt"></i>-->
                <!--<span>其他</span>-->
                <!--<i class="icon-chevron-down"></i>-->
            <!--</a>-->
            <!--<ul class="submenu">-->
                <!--<li><a href="code-editor.html">代码编辑器</a></li>-->
                <!--<li><a href="grids.html">网格</a></li>-->
                <!--<li><a href="signin.html">登录</a></li>-->
                <!--<li><a href="signup.html">注册</a></li>-->
            <!--</ul>-->
        <!--</li>-->
    </ul>
</div>
<!-- end sidebar -->


<!-- main container -->
<div class="content">

    <!-- settings changer -->
    <div class="skins-nav">
        <a href="#" class="skin first_nav selected">
            <span class="icon"></span><span class="text">默认皮肤</span>
        </a>
        <a href="#" class="skin second_nav" data-file="css/compiled/skins/dark.css">
            <span class="icon"></span><span class="text">深色皮肤</span>
        </a>
    </div>

    <!-- upper main stats -->
    <div id="main-stats">
        <div class="row stats-row">
            <div class="col-md-3 col-sm-3 stat">
                <div class="data">
                    <span class="number">2457</span>
                    访问
                </div>
                <span class="date">今天</span>
            </div>
            <div class="col-md-3 col-sm-3 stat">
                <div class="data">
                    <span class="number">3240</span>
                    用户
                </div>
                <span class="date">2013年11月</span>
            </div>
            <div class="col-md-3 col-sm-3 stat">
                <div class="data">
                    <span class="number">322</span>
                    订单
                </div>
                <span class="date">本周</span>
            </div>
            <div class="col-md-3 col-sm-3 stat last">
                <div class="data">
                    <span class="number">$2,340</span>
                    销售金额
                </div>
                <span class="date">最近30天</span>
            </div>
        </div>
    </div>
    <!-- end upper main stats -->

    <div id="pad-wrapper">

        <!-- statistics chart built with jQuery Flot -->
        <!--<div class="row chart">-->
            <!--<div class="col-md-12">-->
                <!--<h4 class="clearfix">-->
                    <!--Statistics-->
                    <!--<div class="btn-group pull-right">-->
                        <!--<button class="glow left">日</button>-->
                        <!--<button class="glow middle active">月</button>-->
                        <!--<button class="glow right">年</button>-->
                    <!--</div>-->
                <!--</h4>-->
            <!--</div>-->
            <!--<div class="col-md-12">-->
                <!--<div id="statsChart"></div>-->
            <!--</div>-->
        <!--</div>-->
        <!--&lt;!&ndash; end statistics chart &ndash;&gt;-->

        <!-- UI Elements section -->
        <!--<div class="row section ui-elements">-->
            <!--<div class="col-md-12">-->
                <!--<h4>UI Elements</h4>-->
            <!--</div>-->
            <!--<div class="col-md-5 knobs">-->
                <!--<div class="knob-wrapper">-->
                    <!--<input type="text" value="50" class="knob" data-thickness=".3" data-inputColor="#333" data-fgColor="#30a1ec" data-bgColor="#d4ecfd" data-width="150">-->
                    <!--<div class="info">-->
                        <!--<div class="param">-->
                            <!--<span class="line blue"></span>-->
                            <!--Active users-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="knob-wrapper">-->
                    <!--<input type="text" value="75" class="knob second" data-thickness=".3" data-inputColor="#333" data-fgColor="#3d88ba" data-bgColor="#d4ecfd" data-width="150">-->
                    <!--<div class="info">-->
                        <!--<div class="param">-->
                            <!--<span class="line blue"></span>-->
                            <!--% disk space usage-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
            <!--<div class="col-md-6 showcase">-->
                <!--<div class="ui-sliders">-->
                    <!--<div class="slider slider-sample1 vertical-handler"></div>-->
                    <!--<div class="slider slider-sample2"></div>-->
                    <!--<div class="slider slider-sample3"></div>-->
                <!--</div>-->
                <!--<div class="ui-group">-->
                    <!--<a class="btn-flat inverse">Large Button</a>-->
                    <!--<a class="btn-flat gray">Large Button</a>-->
                    <!--<a class="btn-flat default">Large Button</a>-->
                    <!--<a class="btn-flat primary">Large Button</a>-->
                <!--</div>-->

                <!--<div class="ui-group">-->
                    <!--<a class="btn-flat icon">-->
                        <!--<i class="tool"></i> Icon button-->
                    <!--</a>-->
                    <!--<a class="btn-glow small inverse">-->
                        <!--<i class="shuffle"></i>-->
                    <!--</a>-->
                    <!--<a class="btn-glow small primary">-->
                        <!--<i class="setting"></i>-->
                    <!--</a>-->
                    <!--<a class="btn-glow small default">-->
                        <!--<i class="attach"></i>-->
                    <!--</a>-->
                    <!--<div class="ui-select">-->
                        <!--<select>-->
                            <!--<option selected>Dropdown</option>-->
                            <!--<option>Custom selects</option>-->
                            <!--<option>Pure css styles</option>-->
                        <!--</select>-->
                    <!--</div>-->

                    <!--<div class="btn-group">-->
                        <!--<button class="glow left">LEFT</button>-->
                        <!--<button class="glow right">RIGHT</button>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
        <!-- end UI elements section -->

        <!-- table sample -->
        <!-- the script for the toggle all checkboxes from header is located in js/theme.js -->
        <div class="table-products section">
            <div class="row head">
                <div class="col-md-12">
                    <h4>Products <small>Table sample</small></h4>
                </div>
            </div>

            <div class="row filter-block">
                <div class="col-md-8 col-md-offset-5">
                    <div class="ui-select">
                        <select>
                            <option>Filter users</option>
                            <option>Signed last 30 days</option>
                            <option>Active users</option>
                        </select>
                    </div>
                    <input type="text" class="search">
                    <a class="btn-flat new-product">+ Add product</a>
                </div>
            </div>

            <div class="row">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th class="col-md-3">
                            <input type="checkbox">
                            Product
                        </th>
                        <th class="col-md-3">
                            <span class="line"></span>Description
                        </th>
                        <th class="col-md-3">
                            <span class="line"></span>Status
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    <!-- row -->
                    <tr class="first">
                        <td>
                            <input type="checkbox">
                            <div class="img">
                                <img src="img/table-img.png">
                            </div>
                            <a href="#">There are many variations </a>
                        </td>
                        <td class="description">
                            if you are going to use a passage of Lorem Ipsum.
                        </td>
                        <td>
                            <span class="label label-success">Active</span>
                            <ul class="actions">
                                <li><i class="table-edit"></i></span></li>
                                <li><i class="table-settings"></i></li>
                                <li class="last"><i class="table-delete"></i></li>
                            </ul>
                        </td>
                    </tr>
                    <!-- row -->
                    <tr>
                        <td>
                            <input type="checkbox">
                            <div class="img">
                                <img src="img/table-img.png">
                            </div>
                            <a href="#">Internet tend</a>
                        </td>
                        <td class="description">
                            There are many variations of passages.
                        </td>
                        <td>
                            <ul class="actions">
                                <li><i class="table-edit"></i></span></li>
                                <li><i class="table-settings"></i></li>
                                <li class="last"><i class="table-delete"></i></li>
                            </ul>
                        </td>
                    </tr>
                    <!-- row -->
                    <tr>
                        <td>
                            <input type="checkbox">
                            <div class="img">
                                <img src="img/table-img.png">
                            </div>
                            <a href="#">Many desktop publishing </a>
                        </td>
                        <td class="description">
                            if you are going to use a passage of Lorem Ipsum.
                        </td>
                        <td>
                            <ul class="actions">
                                <li><i class="table-edit"></i></span></li>
                                <li><i class="table-settings"></i></li>
                                <li class="last"><i class="table-delete"></i></li>
                            </ul>
                        </td>
                    </tr>
                    <!-- row -->
                    <tr>
                        <td>
                            <input type="checkbox">
                            <div class="img">
                                <img src="img/table-img.png">
                            </div>
                            <a href="#">Generate Lorem </a>
                        </td>
                        <td class="description">
                            There are many variations of passages.
                        </td>
                        <td>
                            <span class="label label-info">Standby</span>
                            <ul class="actions">
                                <li><i class="table-edit"></i></span></li>
                                <li><i class="table-settings"></i></li>
                                <li class="last"><i class="table-delete"></i></li>
                            </ul>
                        </td>
                    </tr>
                    <!-- row -->
                    <tr>
                        <td>
                            <input type="checkbox">
                            <div class="img">
                                <img src="img/table-img.png">
                            </div>
                            <a href="#">Internet tend</a>
                        </td>
                        <td class="description">
                            There are many variations of passages.
                        </td>
                        <td>
                            <ul class="actions">
                                <li><i class="table-edit"></i></span></li>
                                <li><i class="table-settings"></i></li>
                                <li class="last"><i class="table-delete"></i></li>
                            </ul>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <ul class="pagination">
                <li><a href="#">&laquo;</a></li>
                <li class="active"><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">&raquo;</a></li>
            </ul>
        </div>
        <!-- end table sample -->
    </div>
</div>


<!-- scripts -->
<script th:src="@{/js/jquery-1.11.3.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/jquery-ui-1.10.2.custom.min.js}"></script>
<!-- knob -->
<script th:src="@{/js/jquery.knob.js}"></script>
<!-- flot charts -->
<script th:src="@{/js/jquery.flot.js}"></script>
<script th:src="@{/js/jquery.flot.stack.js}"></script>
<script th:src="@{/js/jquery.flot.resize.js}"></script>
<script th:src="@{/js/theme.js}"></script>

<script type="text/javascript">

</script>
</body>
</html>